<template>
    <div class="view" :style="showSpecBoard?'background:#000':''" v-wechat-title="$route.meta.title=productDetailData.name">
        <div class="skeleton-preview" v-if="skeletonShow">
            <img src="@/assets/skeleton/skeleton-product-detail.png">
        </div>
        <div class="transformation-wrap" :class="{'transformation-scale':showSpecBoard}" v-show="!skeletonShow">
            <header class="header" ref="header" :style="'background:rgba(255,255,255,'+headAlpha+')'">
                <div class="header-btn" @click="back"
                     :style="'background:rgba(0,0,0,'+((0.4-headAlpha*.4))+');color:'+(headAlpha>.9?'#111':'')">
                    <span class="cubeic-back"></span>
                </div>
                <div style="width: 32px;height: 32px"></div>
                <div class="nav">
                    <div class="nav-tab" :style="'opacity:'+headAlpha+';'">
                        <div :class="'tab '+(currentPoint == 0?'active':'')" @click="scrollTo(0)">宝贝</div>
                        <div :class="'tab '+(currentPoint == 1?'active':'')" @click="scrollTo(1)">评价</div>
                        <div :class="'tab '+(currentPoint == 2?'active':'')" @click="scrollTo(2)">详情</div>
                        <div :class="'tab '+(currentPoint == 3?'active':'')" @click="scrollTo(3)">推荐</div>
                    </div>
                </div>
                <div class="header-btn" @click="toPage('shoppingCart')"
                     :style="'background:rgba(0,0,0,'+((0.4-headAlpha*.4))+');color:'+(headAlpha>.9?'#111':'')">
                    <span class="iconfont icon-cart_light"></span>
                </div>
                <div class="header-btn"
                     :style="'background:rgba(0,0,0,'+((0.4-headAlpha*.4))+');color:'+(headAlpha>.9?'#111':'')">
                    <span class="cubeic-more"></span>
                </div>
            </header>
            <!--        @scroll="onScrollHandle" @pulling-down="onPullingDown"-->
            <cube-scroll class="scroll" :options="scrollOptions" ref="scroll" :scroll-events="['scroll']" @scroll="onScrollHandle">
                <div class="wrap">
                    <cube-slide class="product-banner" ref="slide" :data="productDetailData.image">
                        <cube-slide-item v-for="(image,index) in productDetailData.image" :key="index">
                            <div class="product-banner-item">
                                <img class="product-banner-image" :src="image.file_path+'?imageView2/0/w/450'">
                            </div>
                        </cube-slide-item>
                        <template slot="dots" slot-scope="props">
                            {{props.current+1}}/{{props.dots.length}}
                        </template>
                    </cube-slide>
                    <div class="base">
                        <div class="present-price">
                            <div class="main-price">
                                <p class="price">
                                <span class="num" v-if="currentSpecIndex===-1">
                                    {{priceSection[0]}}
                                </span>
                                    <span class="num" v-else>
                                    {{productSpecData.spec_list[currentSpecIndex].form.item_price}}
                                </span>

                                </p>
                                <p class="sign"><span>可以使用积分支付</span></p>
                            </div>
                        </div>
                        <div class="original-price" v-if="Number(priceSection[1]) > 0">
                            价格：¥
                            <del>{{priceSection[1]}}</del>
                        </div>
                        <div class="title ">
                            <div class="name ellipsis-2">
                                {{productDetailData.name}}
                            </div>
                            <div class="share" @click="share"><i class="iconfont icon-share"></i>分享</div>
                        </div>
                        <div class="sub">
                            <div class="text">
                                <span v-if="productDetailData.delivery">快递：{{productDetailData.delivery.method.text || ''}}</span>
                            </div>
                            <div class="text">
                                <span>销量：{{saleNum}}</span>
                            </div>
                            <div class="text">
                                <span>库存：{{currentSpecIndex===-1? stockTotal:productSpecData.spec_list[currentSpecIndex].form.stock_num}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="action" @click="showSpecBoard = !showSpecBoard" v-if="productDetailData.spec_type === 20">
                        <div class="line">
                            <div class="label">规格</div>
                            <div class="tip ellipsis">{{specedStr}}</div>
                            <div class="icon"><i class="cubeic-arrow"></i></div>
                        </div>
                    </div>
                    <div class="action" v-if="productDetailData.supplier">
                        <div class="line">
                            <div class="label">供货商</div>
                            <div class="tip ellipsis">{{productDetailData.supplier.supplier_name}}</div>

                        </div>
                    </div>
                    <div class="comment" ref="comment" @click="toProductCommentPage">
                        <div class="title">
                            <div class="text">宝贝评价({{productDetailData.comment_data_count}})</div>
                            <template v-if="showCommentList.length >0">
                                <div class="all">查看全部</div>
                                <div class="icon cubeic-arrow"></div>
                            </template>
                        </div>
                        <div class="no-data" v-if="showCommentList.length ===0">
                            暂无热心的小伙伴评价该商品
                        </div>
                        <div class="content" v-for="comment in showCommentList " :key="comment.comment_id">
                            <div class="user">
                                <div class="face">
                                    <img :src="comment.user.avatar_id>0?comment.user.avatar.file_path+'?imageView2/0/w/25':publicPath+'img/base/default-face.png'"/>
                                </div>
                                <div class="name">
                                    {{comment.user.nickName || '匿名用户'}}
                                </div>
                            </div>
                            <div class="text ellipsis">
                                {{comment.content}}
                            </div>
                        </div>
                    </div>
                    <div class="divide-bar">
                        <span class="line"></span>
                        <span class="text">详情</span>
                        <span class="line"></span>
                    </div>
                    <div class="desc product-detail" id="description" ref="desc" v-html="describe" @click="showDescImagePreview"></div>
                    <div class="recommend" ref="recommend">
                        <div class="title">为您推荐</div>
                        <div class="list">
                            <waterfall :data="rendomList">
                                <div class="product-item" v-for="product in rendomList" @click="toProductDetail(product.item_id)">
                                    <div class="product-item-img">
                                        <img :src="product.image[0].file_path+'?imageView2/0/w/200'">
                                    </div>
                                    <div class="product-item-title ellipsis-2">
                                        {{product.name}}
                                    </div>
                                    <div class="product-item-price">
                                        <div class="product-item-price-box">
                                            <span class="now-price">{{product.item_price}}</span>
                                            <span class="line-price">{{product.line_price}}</span>
                                        </div>
                                        <span class="product-item-sale">已售 {{product.sales_num}}</span>
                                    </div>
                                </div>

                            </waterfall>

                        </div>
                    </div>
                </div>

            </cube-scroll>
            <div class="bottom">
                <div class="small-btn">
                    <span class="icon iconfont icon-shouye"></span>
                    <span class="txt">首页</span>
                </div>
                <div class="small-btn">
                    <span class="icon iconfont icon-kefu"></span>
                    <span class="txt">客服</span>
                </div>
                <!--                <div class="small-btn">-->
                <!--                    <span class="icon iconfont icon-favor"></span>-->
                <!--                    <span class="txt">收藏</span>-->
                <!--                </div>-->
                <div class="small-btn bar-btn cart" @click="addCart">
                    加入购物车
                </div>
                <div class="small-btn bar-btn buy" @click="buyNow">
                    立即购买
                </div>
            </div>
        </div>
        <!--        规格-->
        <div class="spec-display-board" :class="{'show':showSpecBoardBackground}">
            <div class="wrapper" @click="showSpecBoard = false"></div>
            <div class="container" :class="{'show':showSpecBoard}">
                <div class="prop">
                    <div class="prop-img">
                        <img :src="productDetailData.image[0].file_path+'?imageView2/2/w/175'" v-if="productDetailData.image"/>
                    </div>
                    <div class="prop-info">
                        <div class="prop-title ellipsis-2">{{productDetailData.name}}</div>
                        <div class="prop-price" v-if="currentSpecIndex===-1">¥ {{priceSection[0]}}</div>
                        <div class="prop-price" v-if="currentSpecIndex!==-1">¥ {{productSpecData.spec_list[currentSpecIndex].form.item_price}}</div>
                        <div class="prop-quantity">库存：{{currentSpecIndex===-1? stockTotal:productSpecData.spec_list[currentSpecIndex].form.stock_num}}</div>
                        <div class="prop-select ellipsis">{{specedStr}}</div>

                    </div>
                    <div class="prop-close" @click="showSpecBoard = false">
                        <i class="iconfont icon-close"></i>
                    </div>
                </div>
                <div class="spec-content">
                    <cube-scroll :options="{scrollbar:true}" ref="skuScorll" :data="productSpecData.spec_attr">
                        <div v-for="(specObj,specIndex) in productSpecData.spec_attr" :key="specObj.group_id">
                            <h2>{{specObj.group_name}}</h2>
                            <ul>
                                <li class="normal"
                                    @click="selectSpec(specIndex,index)"
                                    v-for="(spec,index) in specObj.spec_items"
                                    :key="spec.index"
                                    :class="{'selected': currentSpecArray[specIndex]===spec.item_id}">
                                    {{spec.spec_value}}
                                </li>
                            </ul>
                        </div>
                    </cube-scroll>
                </div>
                <div class="quantity">
                    <h2>购买数量 </h2>
                    <number-box :disabled="currentSpecIndex===-1" :value='amount' :max='currentSpecIndex===-1? stockTotal:productSpecData.spec_list[currentSpecIndex].form.stock_num' :min='1'
                                @change="change"></number-box>
                </div>

                <div class="button">
                    <div class="spec-btn add-cart" :class="{'spec-btn-single':actionStatus===2 }" @click="addCart" v-if="actionStatus === 0 || actionStatus=== 2 ">加入购物车</div>
                    <div class="spec-btn go-buy" :class="{'spec-btn-single':actionStatus===1 }" v-if="actionStatus === 0 || actionStatus=== 1 " @click="buyNow">立即购买</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";

    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import NavBar from "@/components/aui/NavBar.vue";
    import NumberBox from "@/components/aui/NumberBox.vue";


    import CommonUnit from "@/unit/CommonUnit";
    import Waterfall from "vue-waterfall2/waterfall.vue";
    import {shareControllerToggle} from "@/store/dispatches";

    @Component({
        components: {
            NavBar, NumberBox, Waterfall
        }
    })
    export default class ProductDetail extends Scene {
        private publicPath: string = process.env.BASE_URL;
        private skeletonShow: boolean = true;
        private productDetailData: any = {};
        private productSpecData: any = {};
        // private currentSpecId: string = "";
        private currentSpecArray: number[] = [];
        private rendomList: any[] = [];
        private specDataList: any[] = [];
        private amount: number = 1;
        private commentList: any[] = [];
        private actionStatus: number = 0;

        private pullDownY: number = 0;
        private pullDownStyle: string = "";
        private triggerSurpriseFlag: boolean = false;

        private scroll: any = "";
        private comment: any = "";
        private desc: any = "";
        private recommend: any = "";
        private header: any = "";

        private pointArray: number[] = [0, 0, 0, 0];
        private currentPoint: number = 0;

        private showSpecBoard: boolean = false;
        private showSpecBoardBackground: boolean = false;

        public onShareMessage: any = {
            title: "我发现了一件商品，快来帮我看看吧",
            desc: "",
            thumb: "",
            link: ""
        };


        private scrollOptions: object = {
            pullDownRefresh: false,
            pullUpLoad: false,
        };

        @State("UserStore")
        public user!: InterfaceUser;

        @Watch("showSpecBoard")
        private onChangeShowBoard(n: boolean) {
            if (!n) {
                setTimeout(() => {
                    this.showSpecBoardBackground = false;
                    this.actionStatus = 0;
                }, 300);
            } else {
                this.showSpecBoardBackground = true;
            }
        }

        @Watch("$route")
        private onChangeItemId(n: any, o: any) {
            if (o.name === "productDetail" && n.name === "productDetail" && Number(n.query.id) > 0) {
                this.initData();
                this.getProductDetail();
            }
        }

        private get showCommentList(): any[] {
            return this.commentList.slice(0, 2);
        }

        private initData(): void {
            this.productDetailData = {};
            this.productSpecData = {};
            this.currentSpecArray = [];
            this.rendomList = [];
            this.specDataList = [];
            this.amount = 1;
            this.commentList = [];
            (<any> this).$refs.scroll.scrollTo(0, 0, 200);
        }


        private get itemId(): string {
            return String(this.$route.query.id || 0);
        }

        private get currentSpecIndex(): number {
            let specSkuId: string = this.currentSpecArray.join("_");
            for (let i in this.productSpecData.spec_list) {
                if (specSkuId === String(this.productSpecData.spec_list[i].spec_sku_id)) {
                    return Number(i);
                }
            }
            return -1;
        }


        private get specedStr(): string {
            let emptyCount = 0;
            let specedStrArray = [];
            for (let i in this.currentSpecArray) {
                if (this.currentSpecArray[i] === 0) {
                    emptyCount++;
                } else {
                    for (let j in this.productSpecData.spec_attr[i].spec_items) {
                        if (this.currentSpecArray[i] === this.productSpecData.spec_attr[i].spec_items[j].item_id) {
                            specedStrArray.push(`${this.productSpecData.spec_attr[i].group_name}:${this.productSpecData.spec_attr[i].spec_items[j].spec_value}`);
                        }
                    }
                }
            }
            if (!this.productSpecData.spec_attr || emptyCount === this.productSpecData.spec_attr.length) {
                return "请选择";
            } else {
                return "已选择 " + specedStrArray.join("；");
            }
        }

        private get describe(): string {
            let clientWidth = document.body.clientWidth;
            let describe = this.productDetailData.content ? this.productDetailData.content.replace(/\<img/gi, "<img style=\"max-width:100%;height:auto\" ").replace(/href/gi, "data-href") : "";
            describe = describe.replace(/\.jpg/gi, ".jpg?imageView2/0/q/70");
            return describe;
        }

        private get descAlbum(): string[] {
            const imgReg = /<img.*?(?:>|\/>)/gi;
            const srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
            const imgTagList: string[] = this.productDetailData.content.match(imgReg);
            const descAlbum: string[] = [];
            if (imgTagList) {
                for (let i = 0; i < imgTagList.length; i++) {
                    const src: string[] | null = (imgTagList as string[])[i].match(srcReg);
                    if (src !== null) {
                        if (src[1]) {
                            descAlbum.push(src[1]);
                        }
                    }

                }
            }
            return descAlbum;
        }

        public get headAlpha(): number {
            const pullDownY: number = (this.pullDownY > 0 ? 0 : this.pullDownY);
            const alpha = Math.abs(pullDownY) / 200;
            return (alpha > 1 ? 1 : alpha);
        }

        private get priceSection(): any {
            let minNowPrice: number = 0;
            let maxNowPrice: number = 0;
            let minLinePrice: number = 0;
            let maxLinePrice: number = 0;
            for (let i in this.productSpecData.spec_list) {
                const specPrice = this.productSpecData.spec_list[i].form;
                minNowPrice = specPrice.item_price < minNowPrice || minNowPrice === 0 ? specPrice.item_price : minNowPrice;
                maxNowPrice = specPrice.item_price > maxNowPrice ? specPrice.item_price : maxNowPrice;
                minLinePrice = specPrice.line_price < minLinePrice || minLinePrice === 0 ? specPrice.line_price : minLinePrice;
                maxLinePrice = specPrice.line_price > maxLinePrice ? specPrice.line_price : maxLinePrice;
            }
            return [(minNowPrice === maxNowPrice ? [maxNowPrice] : [minNowPrice, maxNowPrice]).join("-"), maxLinePrice];
        }

        private get saleNum(): number {
            let saleNum = 0;
            for (let i in this.productSpecData.sku) {
                saleNum += this.productSpecData.sku[i].sales_num;
            }
            return saleNum;
        }

        private get stockTotal(): number {
            let stockTotal: number = 0;
            for (let i in this.productDetailData.sku) {
                stockTotal += this.productDetailData.sku[i].stock_num;
            }
            return stockTotal;
        }

        private addCardParam(): any {
            if (this.currentSpecIndex >= 0) {
                return {
                    item_id: this.itemId,
                    item_num: this.amount,
                    item_sku_id: this.productSpecData.spec_list[this.currentSpecIndex].spec_sku_id
                };
            }
            return {};
        }

        private buyParam(): any {
            if (this.currentSpecIndex >= 0) {
                return {
                    itemId: this.itemId,
                    itemNum: this.amount,
                    itemSkuId: this.productSpecData.spec_list[this.currentSpecIndex].spec_sku_id
                };
            }
            return {};
        }

        private mounted() {
            this.getProductDetail();
        }

        private updated() {
            (<any> this).$refs.scroll.refresh();
        }

        private getProductComment() {
            Http.get(this.api.commentList, {item_id: this.itemId, page: 1}).then((res) => {
                if (res.code === 1) {
                    this.commentList = res.data.list.data;
                }
            });
        }

        private getProductRandom() {
            Http.get(this.api.mallRandomItem, {num: 10, item_id: this.itemId}).then((res) => {
                if (res.code === 1) {
                    this.rendomList = res.data.list;
                }
            });
        }

        private getProductDetail(): void {
            this.skeletonShow = true;
            let loadToast = (<any> this).$createToast({
                time: 0,
                type: "loading",
                mask: true,
                txt: "加载商品信息"
            }).show();
            Http.get(this.api.productDetail, {item_id: this.itemId}).then((res) => {
                if (res.code === 1) {
                    this.skeletonShow = false;
                    this.getProductComment();
                    this.getProductRandom();
                    this.productDetailData = res.data.detail;
                    if (res.data.detail.spec_type === 20) {
                        this.productSpecData = res.data.specData;
                        for (let i in this.productSpecData.spec_attr) {
                            this.currentSpecArray.push(0);
                        }
                    } else {
                        this.$set(this.currentSpecArray, 0, res.data.detail.sku[0].spec_sku_id);
                        this.productSpecData = this.singleSpec(res.data.detail.sku[0]);
                    }

                    this.$nextTick(() => {
                        this.scroll = this.$refs.scroll;
                        this.comment = this.$refs.comment;
                        this.desc = this.$refs.desc;
                        this.recommend = this.$refs.recommend;
                        this.header = this.$refs.header;
                        this.scroll.refresh();
                        this.onShareMessage = {
                            title: this.productDetailData.name,
                            desc: "我发现了一件不错的商品，快来帮我看看吧？！",
                            thumb: this.productDetailData.image[0].file_path,
                            link: `${this.webPath}#/loginRegister?shareCode=${this.user.code}`
                        };
                        loadToast.hide();
                    });
                } else {
                    loadToast = (<any> this).$createToast({
                        time: 2500,
                        type: "error",
                        mask: true,
                        txt: `${res.msg}`,
                        onTimeout: () => {
                            this.navigateBack();
                        }
                    }).show();
                }
            }).catch((res) => {
                loadToast.hide();
                this.navigateBack();
            });
        }

        private singleSpec(sku: any) {
            let specAttr: any[] = [];
            let specAttrItem: any = {};
            let specList: any[] = [];
            let specListItem: any = {};
            specAttrItem.group_id = 1;
            specAttrItem.group_name = "默认";
            specAttrItem.spec_items = [{item_id: sku.spec_sku_id, spec_value: "默认"}];
            specAttr.push(specAttrItem);
            specListItem.item_sku_id = sku.item_sku_id;
            specListItem.spec_sku_id = sku.spec_sku_id;
            specListItem.form = sku;
            specList.push(specListItem);
            return {spec_attr: specAttr, spec_list: specList};
        }

        private back(): void {
            this.navigateBack();
        }

        private scrollTo(index: number): void {
            this.pointArray = [0, this.comment.offsetTop, this.desc.offsetTop, this.recommend.offsetTop];
            this.currentPoint = index;
            this.scroll.scrollTo(0, -this.pointArray[index] + (this.pointArray[index] > 0 ? this.header.offsetHeight : 0), 200);
            this.onScrollHandle({y: -this.pointArray[index]});
        }

        private onScrollHandle(pos: any) {
            const scrollDistance = Math.abs(pos.y) + this.header.offsetHeight;
            this.pullDownY = pos.y;
            if (pos.y > 0) {
                this.pullDownStyle = `top:${pos.y}px`;
                this.triggerSurpriseFlag = false;
                if (this.pullDownY > 60) {
                    this.triggerSurpriseFlag = true;
                }
            }

            this.pointArray = [0, this.comment.offsetTop, this.desc.offsetTop, this.recommend.offsetTop];
            if (scrollDistance < this.pointArray[1]) {
                this.currentPoint = 0;
            } else if (scrollDistance >= this.pointArray[1] && scrollDistance < this.pointArray[2]) {
                this.currentPoint = 1;
            } else if (scrollDistance >= this.pointArray[2] && scrollDistance < this.pointArray[3]) {
                this.currentPoint = 2;
            } else {
                this.currentPoint = 3;
            }
        }

        private showDescImagePreview() {
            if (this.descAlbum.length > 0) {
                (<any> this).$createImagePreview({
                    imgs: this.descAlbum,
                    zIndex: 111
                }).show();
            }
        }

        private selectSpec(i: number, j: number): void {
            if (this.productSpecData.spec_attr[i].spec_items[j].item_id === this.currentSpecArray[i]) {
                this.$set(this.currentSpecArray, i, 0);
            } else {
                this.$set(this.currentSpecArray, i, this.productSpecData.spec_attr[i].spec_items[j].item_id);

            }
        }

        private change(value: number) {
            this.amount = value;
        }

        private buyNow() {
            if (this.currentSpecIndex < 0) {
                this.actionStatus = 1;
                this.showSpecBoard = true;
            } else {
                this.navigateTo({
                    name: "orderConfirm",
                    query: {...this.buyParam(), type: 1}
                });
            }
        }

        private addCart() {
            if (this.currentSpecIndex < 0) {
                this.actionStatus = 2;
                this.showSpecBoard = true;
            } else {
                Http.post(this.api.cartAdd, {...this.addCardParam()}, {token: this.user.token}).then((res) => {
                    this.showSpecBoard = false;
                    if (res.code === 1) {
                        (<any> this).$createToast({
                            type: "correct",
                            zIndex: 1000,
                            time: 2500,
                            txt: res.msg,
                        }).show();
                    } else {
                        this.globalSingleResultToast(res);
                    }
                });
            }
        }

        private toProductDetail(id: string) {
            this.navigateTo({
                name: "productDetail",
                query: {
                    id: id
                }
            });
        }

        private toProductCommentPage() {
            if (this.commentList.length > 0) {
                this.navigateTo({
                    name: "productComment",
                    query: {
                        id: this.itemId
                    }
                });
            }
        }

        private toPage(name: string) {
            this.navigateTo({
                name: name
            });
        }

        private share(): void {
            shareControllerToggle(this.onShareMessage);
        }

    }
</script>

<style scoped lang="stylus">


    .view
        height 100vh;
        width 100vw;
        transition background .3s;

        header.header
            height 45px;
            display flex;
            width calc(100vw - 20px);
            z-index 110;
            align-items center;
            padding var(--safe-area-inset-top) 10px 0 10px;
            background rgba(255, 255, 255, 0);
            position fixed;
            top: 0;
            justify-content space-between;

            .header-btn
                width 32px;
                height 32px;
                line-height 32px;
                text-align center;
                border-radius 32px;
                background rgba(0, 0, 0, .4);
                color #fff

            .nav
                width calc(100% - 158px);
                height 32px;
                box-sizing border-box;
                position relative

                .nav-tab
                    display flex;
                    justify-content center;
                    align-items center;
                    line-height 32px;
                    width calc(100vw - 168px);

                    .tab
                        width fit-content;
                        display inline-block;
                        font-size 14px
                        margin 0 3px;
                        padding 0 2px;
                        position relative;

                    .tab.active
                        &::after
                            content '';
                            display block;
                            position absolute;
                            width 100%;
                            left 0;
                            height 2px;
                            background $theme-common-color;
                            bottom 3px;

        .scroll
            height calc(100vh - 54px - var(--safe-area-inset-bottom));

        .wrap
            background #f7f7f7

            .product-banner
                height 100vw;
                width 100vw;
                position relative;

                .product-banner-item
                    height 100vw;
                    width 100vw;
                    display flex;
                    justify-content center;
                    align-items center;

                    .product-banner-image
                        max-height 100vw;
                        height auto;
                        max-width 100vw;
                        width auto;

                >>> .cube-slide-dots
                    height 23px
                    width 40px
                    text-align center;
                    background rgba(0, 0, 0, .3)
                    right 10px;
                    bottom 15px;
                    left auto;
                    border-radius 23px;
                    color #fff;
                    font-size 14px;
                    line-height 23px;

        .base
            height 127px;
            box-sizing border-box;
            padding 0 10px;
            background #fff;

            .present-price
                padding-top 17.5px;

                .main-price
                    display flex;
                    flex-direction row;
                    align-items flex-end;

                    .price
                        color: $theme-weight-color;
                        margin-right 4.8px

                        &::before
                            content '¥'
                            margin-right -3.5px
                            font-size 14px

                        .num
                            font-size 21px;

                    .sign
                        margin-bottom 1px;
                        display flex;
                        text-align center;
                        align-items center;
                        height 5.7px;
                        background #fff1eb;
                        border-radius 5.7px;
                        box-sizing content-box;
                        padding 3.8px;
                        margin-right 3.8px;

                        span
                            font-size 9px;
                            color #EC6584

            .original-price
                margin-top 3px;
                padding-top 2px;
                font-size 11px;
                line-height 10px
                text-align left;
                color #999

            .title
                margin-top 4px;
                line-height 19.5px;
                font-weight bold;
                visibility border-radius;
                font-size 14.5px;
                position relative;
                text-align left;
                color #333;

                .name
                    width 288px;
                    height 39px;

                .share
                    position absolute;
                    verflow hidden;
                    height 24px;
                    line-height 24px;
                    top 7.5px;
                    right -10px;
                    background #f4f4f4;
                    border-top-left-radius 11px;
                    border-bottom-left-radius 11px;
                    font-size 12px;
                    width 54px;
                    text-align center;
                    color #999;
                    display flex;
                    justify-content center

                    i.iconfont
                        font-size 12px;

            .sub
                box-sizing border-box;
                height 38.4px;
                position relative;
                text-align left
                display flex;
                justify-content space-between;

                .text
                    display flex;
                    width fit-content;
                    height auto;
                    max-width 115px;
                    font-size 13px;
                    justify-content center;
                    box-align center;
                    align-items center

                    span
                        color #999;
                        font-size 12px;

        .action
            width 100vw;
            background #fff;
            height 45px
            overflow hidden;
            margin-top 10px;
            position relative;

            .line
                height 15px;
                margin-top 15px;
                line-height 15px;
                margin-left 10px;
                text-align left;
                overflow hidden;

                .label
                    width 40px;
                    font-size 12px;
                    text-align left;
                    float left;

                .tip
                    margin-left 40px;
                    font-size: 13px;
                    color #333;
                    text-align left;

                .icon
                    position absolute;
                    width 15px;
                    height 15px;
                    line-height 14px
                    right 9px;
                    top 15px;
                    color #ccc;

                    i
                        font-size 13px;

        .divide-bar
            background #f2f2f2;
            color #999999;
            display flex;
            justify-content center;
            box-pack center;
            box-align center;
            align-items center;
            padding 8px 0;

            .line
                display inline-block;
                width 40px;
                border-top 1px solid #999

            .text
                font-size 12px;
                padding 0 10px;

        .desc
            padding 10px;
            min-height 50px;
            background #fff;
            font-size 12px;

        .bottom
            height calc(55px + var(--safe-area-inset-bottom));
            position absolute;
            width 100vw;
            padding-right 10px;
            display flex;
            z-index 90;
            flex-direction row;
            padding-bottom var(--safe-area-inset-bottom);
            box-shadow: rgba(0, 0, 0, 0.15) 0 -1px 10px 0;
            align-items center;
            background #fff;
            bottom 0;

            .small-btn
                display flex;
                box-orient vertical;
                box-direction normal;
                flex-direction column;
                box-pack center;
                justify-content center;
                padding 0 9.6px;
                width 48px;
                height 48px;
                box-sizing border-box;
                white-space nowrap;
                align-items center;
                color #999;

                span.icon
                    padding-top 2px;
                    font-size 20px;

                span.txt
                    padding-top 2px;
                    font-size 11px;
                    line-height 19.2px;

            .bar-btn
                width 51% !important;
                height 39px;
                bottom 9px;
                color #fff;
                text-align center;
                font-size 13.5px;
                line-height 1px;
                padding: 0;
                cursor pointer
                font-style: 14px;

            .cart
                background $theme-v1-gradient;
                border-radius: 39px 0 0 39px;

            .buy
                background $theme-v2-gradient;
                border-radius: 0 39px 39px 0;
                margin-left -1px


            .cube-pulldown-wrapper
                transform: translateY(-100%)
                line-height: 0

                .pulldown-content
                    width: 100%

                    span
                        position: absolute
                        bottom: 15px
                        left: 0
                        right: 0
                        margin: auto
                        width: 200px
                        text-align: center;
                        color: #333;
                        font-size: 14px

    .comment
        margin-top 10px;
        background #fff;

        .title
            height 42px;
            line-height 42px;
            display flex;
            position relative;

            .text
                width fit-content;
                height 100%;
                font-size 13.5px;
                margin-left 10px;
                color #333;
                justify-content flex-start;
                box-align center;
                align-items center;

            .all
                color #ff5000;
                position absolute;
                width fit-content;
                height 24px;
                line-height 24px
                font-size 12px;
                right 0;
                top 9px;
                margin-right 27px;
                justify-content flex-start;
                box-align center;
                align-items center;

            .icon
                position: absolute;
                display flex;
                width fit-content;
                height 14px;
                right 0;
                top 14px;
                margin-right 8.5px;
                color #ff5000;
                font-size 13px;
                line-height 14px;


        .content
            width 100%;
            height: 70px;
            position relative;

            .user
                height 20px
                display flex;
                width 100%;

                .face
                    height 20px;
                    width 20px;
                    margin-left 10px;
                    overflow hidden;
                    border-radius 20px;

                    img
                        height 20px;
                        width 20px;

                .name
                    height 18px;
                    padding-top 2px;
                    line-height 20px;
                    color #999;
                    padding-left 5px;
                    font-size 12px;

            .text
                padding 15px 10px;
                font-size 13px;
                color #333;
                text-align left;

    .spec-display-board
        width 100%;
        position fixed;
        max-width 100vw;
        left 0;
        bottom 0;
        height 0;
        z-index 1000;

        .wrapper
            display none;
            position absolute;
            width 100%;
            height 100%;
            left 0;
            top 0;
            z-index -1;
            background rgba(0, 0, 0, .7);

        .container
            display flex;
            box-orient vertical;
            box-direction normal;
            flex-direction column;
            position absolute;
            bottom 0;
            width 100vw;
            height 70vh;
            background #fff;
            color #333;
            font-size 15px;
            border-radius 10px 10px 0 0;
            transition: 0.3s transform;
            box-sizing border-box
            padding 10px 10px var(--safe-area-inset-bottom) 10px;
            transform translateY(100%);
            overflow hidden

            .prop
                padding-bottom 16px
                border-bottom .5px solid #f2f2f2;
                display flex;
                flex-direction row;
                align-items flex-end;

                .prop-img
                    width 110px;
                    height 110px;
                    text-align center;
                    line-height 110px;

                    img
                        max-width 110px
                        width auto;
                        max-height 110px;
                        height auto

            .prop-info
                margin-left 10px;
                color #333;
                width calc(100% - 110px)

                .prop-title
                    font-size 15px;
                    line-height 20px;
                    font-weight 700;

                .prop-price
                    color #ff5000;
                    font-size 18px;
                    line-height 22px;

                .prop-quantity, .prop-select
                    font-size 12px;
                    line-height 17px;
                    padding-right 10px

            .prop-close
                position absolute;
                top 7px;
                right 7px;
                width 20px;
                height 20px;
                color #999;

                i
                    font-size 20px;

            .button
                display flex;
                width 100%;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                box-pack center;
                padding 10px 0;
                overflow hidden;
                box-sizing content-box

                .spec-btn
                    flex 1;
                    height 40px;
                    line-height 40px;
                    color #fff;
                    text-align center;
                    font-size 15px;

                    &.add-cart
                        border-radius: 40px 0 0 40px;
                        background: $theme-v1-gradient

                    &.go-buy
                        border-radius: 0 40px 40px 0;
                        background: $theme-v2-gradient;

                    &.spec-btn-single
                        border-radius 40px;


    .spec-content
        height calc(100% - 120px - 40px - 60px);
        position relative

        h2
            font-size 15px;
            padding 12.5px 0;

        ul
            display flex;
            flex-direction row;
            flex-wrap wrap;
            padding 0;
            margin 0;

            li
                border-radius 20px;
                padding 8px 14.5px;
                font-size 12px;
                margin-right 14px;
                margin-bottom 10px

                &.normal
                    background #f8f8f8;
                    white-space nowrap;

                &.selected
                    color #fff;
                    background $theme-common-color;


    .quantity
        border-top .5px solid #f2f2f2;
        display flex;
        flex-direction row;
        align-items center;
        justify-content space-between;

        h2
            font-size 15px;
            padding 12.5px 0;


    .spec-display-board.show
        height 100%;

        .wrapper
            display block;

    .container.show
        transform translateY(0);

    .recommend
        .title
            margin 10px 0;
            font-size 12px;
            color #939393;
            text-align center;
            line-height 1.25;

        .list
            width 100vw;
            height auto;
            display flex;
            flex-wrap wrap;
            padding-left 15px;


    .transformation-scale
        transform scale(.9) !important;

    .transformation-wrap

        transition transform .3s;
        height calc(100vh - 55px);


</style>
<style lang="stylus">
    .product-detail#description
        font-size 12px;
        line-height 1.5;

        p
            margin 1.12em 0;
            line-height 1.4;
            padding 0;

        img
            float none;
            margin 0;
            padding 0;
            max-width 100%;
            vertical-align top;

        strong
            font-weight 700;
</style>
